<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.js}"></script>
    <style>
        .sc{
            display:none;
        }
    </style>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>营销管理</li>
        <li>订购单管理</li>
        <li>添加</li>
    </ul>
</div>
<form class="formbody" th:action="@{/market/order/addOrders}" method="post">
    <div class="formtitle"><span>订购单信息</span></div>
    <ul class="forminfo">
        <li>
            <label>订单编号</label>
            <input name="orderid" type="text" readonly="readonly" class="roinput"/>
            <i>自动生成不能编辑</i>
        </li>
        <script>
            $(function () {
                SCOrderId();
            });
            function SCOrderId() {
                var date = new Date();
                $("input[name=orderid]").val("DJ" + date.getTime());
            }
        </script>
        <li>
            <input type="hidden" name="uid" th:value="${session.users.uId}" />
            <label>客户姓名</label>
            <select name="customid" type="text" class="dfinput">
                <option value="0">请选择</option>
            </select>
        </li>
        <script>
            $(function () {
                $.ajax({
                    url:"/erp/market/order/ajaxCustomAll",
                    data:{"uid":$("input[name=uid]").val()},
                    dataType:"JSON",
                    success:function (data) {
                        console.log(data);
                        console.log(typeof data);
                        var op="<option value='0'>请选择</option>";
                        $.each(data,function (i, e) {
                            op += "<option value='" + e.customid + "'>" + e.customname + "</option>";
                        });
                        $("select[name=customid]").html("");
                        $("select[name=customid]").append(op);
                    },error:function () {
                        console.log("错误")
                    }
                });
            });
        </script>
        <li>
            <label>订购时间</label>
            <input name="date" type="text" readonly="readonly" class="roinput"/>
            <i>不能编辑</i>
        </li>
        <script>
            $(function () {
                $("input[name=date]").val(getFormatDate());
            });

            function getFormatDate() {
                var date = new Date();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentDate = date.getFullYear() + "-" + month + "-" + strDate
                    + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                return currentDate;
            }
        </script>
        <li>
            <label>创建人</label>
            <input name="" type="text" th:value="${session.users.uname}" readonly="readonly" class="roinput"/>
            <input name="operatorid" type="hidden" th:value="${session.users.uId}"/>
            <i>不能编辑</i>
        </li>
        <li>
            <label>审核状态</label>
            <input type="text" value="未审核" readonly="readonly" class="roinput"/>
            <input name="status" type="hidden" value="1"/>
            <i>初始状态，不能编辑</i>
        </li>
        <li>
            <label>总金额</label>
            <input name="ordermoney" type="text" value="0" readonly="readonly" class="roinput"/>
            <i>自动运算，不能编辑</i>
        </li>
        <li>
            <input type="button" value="新增" onclick="xinzeng()" class="smallbtn"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" id="shanchu1" value="批量删除"  class="smallbtn"/>
            <input type="button" id="shanchu" value="删除" class="smallbtn sc"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="submit" value="保存" class="smallbtn"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="返回" class="smallbtn" onclick="window.history.go(-1);"/>
        </li>
    </ul>
    <script>
        var i=0;
        $(function () {
            $("#tbody").on("change", ".brandSelect", function () {
                var $typeSelect = $(this).parent().next().children("select");
                $.ajax({
                    url: "/erp/market/order/ajaxTypeByBrandId",
                    data: {"brandId": $(this).val()},
                    dataType: "JSON",
                    success: function (data) {
                        var tr = "<option value='0'>请选择</option>";
                        $.each(data, function (i, t) {
                            tr += "<option value='" + t.typeId + "'>" + t.typeName + "</option>";
                        });
                        $typeSelect.html("");
                        $typeSelect.append(tr);
                    }, error: function () {
                        console.log("错误");
                    }
                });
            });
            $("#tbody").on("change", ".typeSelect", function () {
                var $productSelect = $(this).parent().next().children("select");
                $.ajax({
                    url: "/erp/market/order/ajaxProductTypeId",
                    data: {"typeId": $(this).val()},
                    dataType: "JSON",
                    success: function (data) {
                        var tr = "<option value='0'>请选择</option>";
                        $.each(data, function (i, p) {
                            tr += "<option value='" + p.productId + "'>" + p.productModel + "</option>";
                        });
                        $productSelect.html("");
                        $productSelect.append(tr);
                    }, error: function () {
                        console.log("错误");
                    }
                });
            });
            $(".tablelist").on("click", "#checkboxP", function () {
                var ch = $("#checkboxP").prop("checked");
                $(".checkboxC").prop("checked", ch);
            });
            $("#tbody").on("click", ".checkboxC", function () {
                checkboxC1();
            });
            $("#tbody").on("blur", ".num", function () {
                var $price = $(this).parent().next().next().children("input");
                if ($(this).val() != '' && $price.val() != '') {
                    $(this).parent().next().next().next().children("input").val(($(this).val() * $price.val()));
                    jisuan()
                }else{
                    $(this).parent().next().next().next().children("input").val(0);
                    jisuan()
                }
            });
            $("#tbody").on("blur", ".price", function () {
                var $num = $(this).parent().prev().prev().children("input");
                if ($(this).val() != '' && $num.val() != '') {
                    $(this).parent().next().children("input").val(($(this).val() * $num.val()));
                    jisuan();
                }else{
                    $(this).parent().next().children("input").val(0);
                    jisuan();
                }
            });


            $("#shanchu1").click(function () {
                  i++;
                  if(i%2==1){
                    $("#shanchu").removeClass("sc");
                    $(".check").removeClass("sc");
                  }else{
                      $("#shanchu").addClass("sc");
                      $(".check").addClass("sc");
                  }
            });
            $("#shanchu").click(function () {
                var checkboxC = $(".checkboxC");
                for (var i = 0; i < checkboxC.length; i++) {
                    if ($(checkboxC[i]).prop("checked")) {
                        $(checkboxC[i]).parents("tr").remove();
                    }
                }
                $("#checkboxP").prop("checked", false);
                jisuan();
            });
        });

        function jisuan() {
            var $sum = $(".sum");
            var prototal=0;
            for (var i = 0; i < $sum.length; i++) {
                prototal+=($($sum[i]).val()*1);
            }
            $("input[name=ordermoney]").val(prototal);
        }

        function checkboxC1() {
            var checkboxC = $(".checkboxC");
            var count = 0;
            for (var i = 0; i < checkboxC.length; i++) {
                if ($(checkboxC[i]).prop("checked")) {
                    count++;
                    console.log(count);
                }
            }
            if (count == checkboxC.length) {
                $("#checkboxP").prop("checked", true);
            } else {
                $("#checkboxP").prop("checked", false);
            }
        }

        function xinzeng() {
            var count = $("#tbody>tr:last-child>td:eq(1)").text();
            var tr="";
            if(i%2==1){
                tr = "<tr><td class='check'><input type='checkbox' class='checkboxC'/></td>";
            }else{
                tr = "<tr><td class='check sc'><input type='checkbox' class='checkboxC'/></td>";
            }
            tr += "<td>" + (count * 1 + 1 * 1) + "</td>";
            tr += "<td><select class='brandSelect' name='brandId'><option value='0'>请选择</option>";
            $.ajax({
                url: "/erp/market/order/ajaxBrandAll",
                dataType: "JSON",
                success: function (data) {
                    $.each(data, function (i, b) {
                        tr += "<option value='" + b.brandId + "'>" + b.brandName + "</option>";
                    });
                    tr += "</select></td>";
                    tr += "<td><select class='typeSelect' name='typeId'><option value='0'>请选择</option></select></td>";
                    tr += "<td><select class='productSelect' name='productId'><option value='0'>请选择</option></select></td>";
                    tr += "<td><input type='text' placeholder='0' name='purchaseNum' class='num'/></td><td>台</td>";
                    tr += "<td><input type='text' placeholder='0' name='proprice' class='price'/></td>";
                    tr += "<td>￥<input readonly value='0' type='text' name='prototal' class='sum' style='border: 0px white solid' /></td>";
                    tr += "</tr>";
                    $("#tbody").append(tr);
                }, error: function () {
                    console.log("错误");
                }
            });
        }
        


    </script>
    <table class="tablelist">
        <thead>
        <tr>
            <th class="check sc"><input type="checkbox" id="checkboxP"/></th>
            <th>序号</th>
            <th>品牌</th>
            <th>类型</th>
            <th>型号</th>
            <th>数量</th>
            <th>单位</th>
            <th>单价</th>
            <th>金额</th>
        </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
</form>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
